<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔仙儿~个人中心</title>

    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3717641_u5360a8j3t.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4732257_f48u3iczhal.css">
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/user.css" />
</head>

<body>

    <body>
        <header>
            <!--第一部分，快捷菜单 -->
            <div class="fast-menu">
                <div class="menu container">
                    <a href="#">请先登录</a><span>|</span>
                    <a href="#">免费注册</a><span>|</span>
                    <a href="#">我的订单</a><span>|</span>
                    <a href="#">会员中心</a><span>|</span>
                    <a href="#">帮助中心</a><span>|</span>
                    <a href="#">在线客服</a><span>|</span>
                    <a href="#">
                        手机版
                    </a>
                </div>
            </div>
            <!--第二部分，logo和大导航栏 -->
            <div class="navigation container">
                <!--大导航栏左侧（logo）-->
                <div class="logo">
                    <h1>
                        <a href="#" class="logo-text">小兔鲜儿~</a>
                    </h1>
                    <a href="#" class="logo-img">
                        <img src="./images/logo.png" alt="">
                    </a>
                </div>

                <!--大导航栏右侧-->
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">生鲜</a></li>
                    <li><a href="#">美食</a></li>
                    <li><a href="#">餐厨</a></li>
                    <li><a href="#">电器</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">洗护</a></li>
                    <li><a href="#">孕婴</a></li>
                    <li><a href="#">服装</a></li>
                </ul>
                <div class="search">
                    <span class="iconfont icon-sousuo"></span>
                    <input type="search" placeholder="搜一搜" class="search-input">
                </div>

                <div class="cart">
                    <span class="iconfont icon-gouwuchekong"></span>
                    <span class="number">2</span>
                </div>
            </div>
        </header>

        <!-- 第四部分，侧边栏与信息主体 -->
        <div class="user-main">
            <div class="container user">
                <!--大侧边栏（4）-->
                <div class="change-message">
                    <div class="change-message1">
                        <li>
                            <h3>我的账户</h3>
                        </li>
                        <ul>
                            <li><a href="#">个人信息</a></li>
                            <li><a href="#">消息通知</a></li>
                            <li><a href="#">个人信息</a></li>
                            <li><a href="#">安全设置</a></li>
                            <li><a href="#">地址管理</a></li>
                            <li><a href="#">我的积分</a></li>
                            <li><a href="#">我的足迹</a></li>
                            <li><a href="#">邀请有礼</a></li>
                            <li><a href="#">幸运抽奖</a></li>
                        </ul>
                    </div>
                    <div class="change-message2">
                        <li>
                            <h3>交易管理</h3>
                        </li>
                        <ul>
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">优惠券</a></li>
                            <li><a href="#">礼品卡</a></li>
                            <li><a href="#">评价晒单</a></li>
                            <li><a href="#">售后服务</a></li>
                        </ul>
                    </div>
                    <div class="change-message3">
                        <li>
                            <h3>我的收藏</h3>
                        </li>
                        <ul>
                            <li><a href="#">收藏的商品</a></li>
                            <li><a href="#">收藏的专题</a></li>
                            <li><a href="#">收藏的专题</a></li>
                        </ul>
                    </div>
                    <div class="change-message4">
                        <li>
                            <h3>帮助中心</h3>
                        </li>
                        <ul>
                            <li><a href="#">意见反馈</a></li>
                            <li><a href="#">在线客服</a></li>
                        </ul>
                    </div>
                </div>
                <!-- 信息主体（4） -->
                <div class="detail">
                    <!-- 个人信息 -->
                    <div class="detail-mine">
                        <div class="profile">
                            <img src="./uploads/avatar_1.png" alt=""><span> 王大锤</span>

                        </div>
                        <ul class="vip">
                            <li class="vip1">
                                <a href="#"><span class="iconfont icon-vip"></span>
                                    <p>会员中心</p>
                                </a>
                            </li>
                            <li class="vip2">
                                <a href="#"><span class="iconfont icon-shezhi"></span>
                                    <p>安全设置</p>
                                </a>
                            </li>
                            <li class="vip3">
                                <a href="#"><span class="iconfont icon-dizhi"></span>
                                    <p>地址管理</p>
                                </a>
                            </li>
                        </ul>
                    </div>


                    <!-- 我的订单 -->
                    <div class="detail-bill">
                        <div class="bill0">
                            <h2>我的订单</h2>
                            <div class="right">
                                <a href="#" class="more">查看全部 <i class="iconfont icon-jinrujiantou"></i></a>
                            </div>
                        </div>

                        <div class="bill1">
                            <div class="part1">
                                <img src="./uploads/seckill_goods_4.jpg" alt="">
                            </div>
                            <div class="part2">
                                <p class="product">卡西欧商务男士手表 星座系列</p>
                                <p class="type">白色表盘 黑色表带 *1</p>
                            </div>
                            <div class="part3">
                                <p class="status">已付款</p>
                            </div>
                            <div class="part4">
                                <p class="price">￥1999.00</p>
                                <p>（包邮，不包含运费）</p>
                                <p>支付宝在线支付</p>
                            </div>
                            <div class="part5">
                                <a href="#" class="button">查看订单</a>
                                <p>取消订单</p>
                                <p>确认收货</p>
                            </div>
                        </div>

                        <div class="bill2">
                            <div class="part1">
                                <img src="./uploads/seckill_goods_1.jpg" alt="">
                            </div>
                            <div class="part2">
                                <p class="product">Honer 蓝牙智能耳机 无线充电 </p>
                                <p class="type">丹霞红 带3年无条件质保 *1</p>
                            </div>
                            <div class="part3">
                                <p class="status">待收货</p>
                                <p>查看物流</p>
                            </div>
                            <div class="part4">
                                <p class="price">￥599.00</p>
                                <p>（包含运费：25元）</p>
                                <p>VISA 国际支付</p>
                            </div>
                            <div class="part5">
                                <a href="#" class="button">确认收货</a>
                                <p>查看详情</p>
                                <p>再次购买</p>
                            </div>
                        </div>
                    </div>


                    <!-- 我的收藏 -->
                    <div class="detail-collection">
                        <div class="collection0">
                            <h2>我的收藏</h2>
                            <div class="right">
                                <a href="#" class="more">查看全部 <i class="iconfont icon-jinrujiantou"></i></a>
                            </div>
                        </div>

                        <ul class="collection1">
                            <li>
                                <a href="#">
                                    <div class="img-box">
                                        <img src="./uploads/fresh_goods_1.jpg" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>美威 智利原味三文鱼排 240g/袋 4片装</h3>
                                        <p class="type">海鲜年货</p>
                                        <br>
                                        <p class="price"><span>¥</span> 59</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box">
                                        <img src="./uploads/fresh_goods_2.jpg" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只</h3>
                                        <p class="type">火锅食材</p>
                                        <br>
                                        <p class="price"><span>¥</span> 79</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box">
                                        <img src="./uploads/fresh_goods_3.jpg" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>三都港 无公害黄花鱼 700g 2条 袋装</h3>
                                        <p class="type">海鲜水产</p>
                                        <br>
                                        <p class="price"><span>¥</span> 49</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box">
                                        <img src="./uploads/fresh_goods_4.jpg" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>渔公码头 大连鲜食入味 即食海参</h3>
                                        <p class="type">调味海</p>
                                        <br>
                                        <p class="price"><span>¥</span> 899</p>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <!-- 我的足迹 -->
                    <div class="detail-history">
                        <div class="history0">
                            <h2>我的足迹</h2>
                            <div class="right">
                                <a href="#" class="more">查看全部 <i class="iconfont icon-jinrujiantou"></i></a>
                            </div>
                        </div>
                        <ul class="history1">
                            <li>
                                <a href="#">
                                    <div class="img-box">
                                        <img src="./uploads/clothes_goods_1.jpg" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>匡威 时尚运动板鞋 舒适得体 简约大方</h3>
                                        <p class="type">潮流运动</p>
                                        <br>
                                        <p class="price"><span>¥</span> 59</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box">
                                        <img src="./uploads/clothes_goods_2.jpg" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>Apple 智能手表 炫彩表带 经久耐用</h3>
                                        <p class="type">智能配件</p>
                                        <br>
                                        <p class="price"><span>¥</span> 79</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box">
                                        <img src="./uploads/clothes_goods_3.jpg" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>古驰 都市丽人 红色至上主义 女士挂包</h3>
                                        <p class="type">国际品牌</p>
                                        <br>
                                        <p class="price"><span>¥</span> 49</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img-box">
                                        <img src="./uploads/clothes_goods_4.jpg" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>田园印象 小麦青色连衣长裙 现货</h3>
                                        <p class="type">简约出行</p>
                                        <br>
                                        <p class="price"><span>¥</span> 899</p>
                                    </div>
                                </a>
                            </li>
                    </div>
                </div>
            </div>
        </div>


        <!-- 第三部分，服务，关注与下载 -->
        <div class="support container">
            <div class="user-service">
                <h6>客户服务</h6>
                <ul>
                    <li>
                        <i class="iconfont icon-kefu01"> </i>
                        <span>
                            在线客服
                        </span>
                    </li>
                    <li>
                        <i class="iconfont icon-changjianwentixiangguanwenti"></i>
                        <span>
                            问题反馈
                        </span>
                    </li>
                </ul>
            </div>

            <div class="contact-us">
                <h6>关注我们</h6>
                <ul>
                    <li>
                        <i class="iconfont icon-gongzhonghao" style="color: green;"></i>
                        <span>公众号</span>
                    </li>
                    <li>
                        <i class="iconfont icon-weibo"></i>
                        <span>微博</span>
                    </li>
                </ul>
            </div>

            <div class="download-app">
                <h6>下载App</h6>
                <ul>
                    <li>
                        <img src="./uploads/qrcode.png" alt="">
                    </li>
                    <li>
                        <p>扫描二维码</p>
                        <p>立马下载App</p>
                        <a href="#">下载页面</a>
                    </li>
                </ul>
            </div>

            <div class="line"></div><!-- 分割线 -->

            <div class="service-phone ">
                <h6>服务热线</h6>
                <div>
                    <p>400-888-8888</p>
                    <p>周一至周日 8:00-18:00</p>
                </div>
            </div>
        </div>

        <!-- 第四部分，承诺，版权与友情链接 -->
        <div class="promise">
            <div class="ours-promise container">
                <div>
                    <span></span>
                    <span>价格亲民</span>
                </div>
                <div>
                    <span></span>
                    <span>物流快捷</span>
                </div>
                <div>
                    <span></span>
                    <span>品质新鲜</span>
                </div>
            </div>
        </div>
        <!-- 版权 -->
        <div class="copyright">
            <p>
                <a href="#">关于我们</a> <span>|</span>
                <a href="#">帮助中心</a> <span>|</span>
                <a href="#">售后服务</a> <span>|</span>
                <a href="#">配送与验收</a> <span>|</span>
                <a href="#">商务合作</a> <span>|</span>
                <a href="#">搜索推荐</a> <span>|</span>
                <a href="#">友情链接</a>
            </p>
            <p>CopyRight @ 小兔鲜儿</p>
        </div>

        </footer>

    </body>

</html>